<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:45:"F:\chat/application/push\view\index\cart.html";i:1561039026;}*/ ?>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <META HTTP-EQUIV="pragma" content="no-cache">
  <META HTTP-EQUIV="Cache-Control" content="no-store, must-revalidate">
  <META HTTP-EQUIV="expires" content="0">
  <meta name="renderer" content="webkit">
  <meta name="searchtitle" content="聊天室">
  <meta name="title" content="聊天室">
  <meta name="description" content="聊天室" />
  <meta name="keywords" content="聊天室" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>聊天室</title>


  <script type="text/javascript">
  //WebSocket = null;
  </script>
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
    if (typeof console == "undefined") { this.console = { log: function (msg) { } }; }
    // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
    WEB_SOCKET_SWF_LOCATION = "/public/chat/swf/WebSocketMain.swf";
    // 开启flash的websocket debug
    WEB_SOCKET_DEBUG = true;

    var ws, name, client_list = {};

    // 连接服务端
    function connect() {
      $('#dialog').scrollTop($('#dialog')[0].scrollHeight);
      // 创建websocket
      // alert("ws://"+document.domain+":7272");
      ws = new WebSocket("ws://" + document.domain + ":7272");
      // ws = new WebSocket("ws://192.168.1.206:7272");
      // 当socket连接打开时，输入用户名
      ws.onopen = onopen;
      // 当有消息时根据消息类型显示不同信息
      ws.onmessage = onmessage;
      ws.onclose = function () {
        console.log("连接关闭，定时重连");
        connect();
      };
      ws.onerror = function () {
        console.log("出现错误");
      };
    }

    // 连接建立时发送登录信息
    function onopen() {
      var name = "<?php echo $param['nickname']; ?>";
      var room_id = "<?php echo $param['room_id']; ?>";
      var user_id = "<?php echo $param['user_id']; ?>";
      console.log(name, user_id, room_id)

      // 登录
      var login_data = '{"type":"login","client_name":"' + name.replace(/"/g, '\\"') + '","room_id":"' + room_id + '","user_id":"' + user_id + '"}';
      console.log("websocket握手成功，发送登录数据:" + login_data);
      ws.send(login_data);
    }

    // 服务端发来消息时
    function onmessage(e) {
      console.log(e.data);
      var data = eval("(" + e.data + ")");
      switch (data['type']) {
        // 服务端ping客户端
        case 'ping':
          ws.send('{"type":"pong"}');
          break;
        // 登录 更新用户列表
        case 'login':
          //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
          say(data['client_id'], data['client_name'], data['client_name'] + ' 加入了聊天室', data['time']);
          if (data['client_list']) {
            client_list = data['client_list'];
          }
          else {
            client_list[data['client_id']] = data['client_name'];
          }
          flush_client_list();
          console.log(data['client_name'] + "登录成功");
          break;
        // 发言
        case 'say':
          //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
          say(data['from_client_id'], data['from_client_name'], data['content'], data['time'], data['user_id']);
          break;
        // 用户退出 更新用户列表
        case 'logout':
          //{"type":"logout","client_id":xxx,"time":"xxx"}
          say(data['from_client_id'], data['from_client_name'], data['from_client_name'] + ' 退出了', data['time']);
          delete client_list[data['from_client_id']];
          flush_client_list();
      }
    }


    // 提交对话
    function onSubmit() {
      var user_id = "<?php echo $param['user_id']; ?>";
      var input = document.getElementById("textarea");
      var to_client_id = $("#client_list option:selected").attr("value");
      var to_client_name = $("#client_list option:selected").text();
      console.log('{"type":"say","user_id":"' + user_id + '","to_client_id":"' + to_client_id + '","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
      ws.send('{"type":"say","user_id":"' + user_id + '","to_client_id":"' + to_client_id + '","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
      input.value = "";
      input.focus();
    }

    // 刷新用户列表框
    function flush_client_list() {
      var userlist_window = $("#userlist");
      var client_list_slelect = $("#client_list");
      userlist_window.empty();
      client_list_slelect.empty();
      userlist_window.append('<h4>在线用户</h4><ul>');
      client_list_slelect.append('<option value="all" id="cli_all">所有人</option>');
      for (var p in client_list) {
        userlist_window.append('<li id="' + p + '">' + client_list[p] + '</li>');
        client_list_slelect.append('<option value="' + p + '">' + client_list[p] + '</option>');
      }
      $("#client_list").val(select_client_id);
      userlist_window.append('</ul>');
    }

    // 发言
    function say(from_client_id, from_client_name, content, time, to) {
      var user_id = "<?php echo $param['user_id']; ?>";

      if (user_id == to) {
        $("#dialog").append('<div class="speech_item1"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&fm=27&gp=0.jpg" class="user_icon1" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top1">' + content + '</p> </div>');
      } else {
        $("#dialog").append('<div class="speech_item"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&fm=27&gp=0.jpg" class="user_icon" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
      }
      $('#dialog').scrollTop($('#dialog')[0].scrollHeight);
    }

    $(function () {
      select_client_id = 'all';
      $("#client_list").change(function () {
        select_client_id = $("#client_list option:selected").attr("value");
      });
    });
  </script>
</head>
<style>
  #dialog {
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>

<body onload="connect();">
  <div class="container">
    <div class="row clearfix">
      <div class="col-sm-12 column">
        <div class="thumbnail">
          <div class="caption" id="dialog">
            <?php if(is_array($chat) || $chat instanceof \think\Collection || $chat instanceof \think\Paginator): $i = 0; $__LIST__ = $chat;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;if($vo['user_id'] != $param['user_id']): ?>
            <div class="speech_item"><img style="width:40px;"
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&amp;fm=27&amp;gp=0.jpg"
                class="user_icon"> <?php echo $vo['name']; ?> <br> <?php echo date("Y-m-d H:i:s",$vo['created_time']); ?><div style="clear:both;">
              </div>
              <p class="triangle-isosceles top"><?php echo $vo['content']; ?></p>
            </div>
            <?php else: ?>
            <div class="speech_item1"><img style="width:40px;"
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&amp;fm=27&amp;gp=0.jpg"
                class="user_icon1"> <?php echo $vo['name']; ?> <br> <?php echo date("Y-m-d H:i:s",$vo['created_time']); ?><div style="clear:both;">
              </div>
              <p class="triangle-isosceles top1"><?php echo $vo['content']; ?></p>
            </div>
            <?php endif; endforeach; endif; else: echo "" ;endif; ?>
          </div>
        </div>
        <form onsubmit="onSubmit(); return false;">
          <select style="margin-bottom:8px" id="client_list">
            <option value="all">所有人</option>
          </select>
          <textarea class="textarea thumbnail" id="textarea"></textarea>
          <div class="say-btn"><input type="submit" class="btn btn-default" value="发表" /></div>
        </form>
      </div>
      <div class="col-sm-12 column">
        <div class="thumbnail">
          <div class="caption" id="userlist"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>